<!-- 该组件用于简化处理触屏事件，提供一组常用返回 -->
<template></template>
<script>
	export default{
		name:"viTouchProcessor",
		props:{
			//滑动触发距离
			distance:{
				type:[Number,null],
				default:0
			},
			longPressTime:{
				type:[Number,null],
				default:0
			},
			single:{
				type:[Boolean,null],
				default:null
			}
		},
		data(){
			return {
				startPoint: {},
				endPoint: {},
				params: [],
				pressTimer: null,
				hasLongPress:false,
			}
		},
		computed:{
			setting(){
				return {
					distance: this.distance ||30,
					longPressTime: this.longPressTime ||1500,
					single: this.$api.isBoolean(this.single)? this.single :true,
				}
			}
		},
		methods:{
			clearPressTimer(){
				let timer = this.pressTimer;
				if(timer){
					clearTimeout(timer);
					this.pressTimer = null;
				}
			},
			start(e, ...params){
				// console.log("start",e);
				//只允许一个触点
				if(e.touches.length!=1){
					return
				}
				if(params.length){
					this.params = params
				}
				this.hasLongPress = false;
				this.pressTimer = setTimeout(()=>{
					this.$emit("longPress", ...this.params);
					this.pressTimer = null;
					this.hasLongPress = true;
				}, this.setting.longPressTime)
				
				this.startPoint = {
					x: e.touches[0].clientX,
					y: e.touches[0].clientY,
				}
				this.endPoint = this.startPoint;
				this.$emit("start", e, ...this.params);
			},
			move(e, ...params){
				// console.log("move",e);
				//只允许一个触点
				if(e.touches.length!=1){
					return
				}
				if(params.length){
					this.params = params
				}
				this.clearPressTimer();
				this.endPoint = {
					x: e.touches[0].clientX,
					y: e.touches[0].clientY,
				}
				this.checkPoint(this.endPoint, true);
				this.$emit("move", e, ...this.params);
			},
			end(e, ...params){//触摸点为空
				// console.log("end",e);
				if(params.length){
					this.params = params
				}
				this.clearPressTimer();
				this.checkPoint(this.endPoint);
				//还原状态
				this.$emit("leftActive", false, ...this.params);
				this.$emit("rightActive", false, ...this.params);
				this.$emit("topActive", false, ...this.params);
				this.$emit("bottomActive", false, ...this.params);
				this.$emit("end", e, ...this.params);
			},
			checkPoint(point, isState){
				let startPoint = this.startPoint,
					single = this.setting.single,
					diffX = point.x - startPoint.x,
					diffY = point.y - startPoint.y,
					absDiffX = Math.abs(diffX),
					absDiffY = Math.abs(diffY),
					distance = this.setting.distance;
				//四个方向激活验证
				let leftAct = single? diffX<=-distance && absDiffX>=absDiffY :diffX<=-distance,
					rightAct = single? diffX>=distance && absDiffX>=absDiffY :diffX>distance,
					topAct = single? diffY<=-distance && absDiffX<absDiffY :diffY<=-distance,
					bottomAct = single? diffY>=distance && absDiffX<absDiffY :diffY>=distance;
				
				if(isState){//状态事件
					this.$emit("leftActive", leftAct, ...this.params);
					this.$emit("rightActive", rightAct, ...this.params);
					this.$emit("topActive", topAct, ...this.params);
					this.$emit("bottomActive", bottomAct, ...this.params);
				}else{
					leftAct? this.$emit("left", ...this.params) :"";
					rightAct? this.$emit("right", ...this.params) :"";
					topAct? this.$emit("top", ...this.params) :"";
					bottomAct? this.$emit("bottom", ...this.params) :"";
				}
				//触发点击
				if(!isState && Math.abs(diffX)<distance && Math.abs(diffY)<distance && !this.hasLongPress){
					this.$emit("click", ...this.params)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>